<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>3d视觉差图片翻转效果</title>
	<link rel="stylesheet" href="style.css">
	<link rel="shortcut icon" type="text/css" href="1.jpg">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>3d视觉差图片翻转效果</h1>
		</header>

		<div class="wrapper">

			<div class="cols">
				
				<!-- 一个col，一个方块 -->
				<div class="col" ontouchstart="this.classList.toggle('hover');">
					<div class="container">
						<div class="front" style="background-image: url(1.jpg)">
							<div class="inner">
								<p>Diligord</p>
								<span>Lorem ipsum</span>
							</div>
						</div>
						<div class="back">
							<div class="inner">
							  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
							</div>
						</div>
					</div>
				</div>
				<!-- 一个col，一个方块 -->
				<div class="col" ontouchstart="this.classList.toggle('hover');">
					<div class="container">
						<div class="front" style="background-image: url(2.jpg)">
							<div class="inner">
								<p>Diligord</p>
								<span>Lorem ipsum</span>
							</div>
						</div>
						<div class="back">
							<div class="inner">
							  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
							</div>
						</div>
					</div>
				</div>
				<!-- 一个col，一个方块 -->
				<div class="col" ontouchstart="this.classList.toggle('hover');">
					<div class="container">
						<div class="front" style="background-image: url(3.jpg)">
							<div class="inner">
								<p>Diligord</p>
								<span>Lorem ipsum</span>
							</div>
						</div>
						<div class="back">
							<div class="inner">
							  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
							</div>
						</div>
					</div>
				</div>
				<!-- 一个col，一个方块 -->
				<div class="col" ontouchstart="this.classList.toggle('hover');">
					<div class="container">
						<div class="front" style="background-image: url(4.jpg)">
							<div class="inner">
								<p>Diligord</p>
								<span>Lorem ipsum</span>
							</div>
						</div>
						<div class="back">
							<div class="inner">
							  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
							</div>
						</div>
					</div>
				</div>
				<!-- 一个col，一个方块 -->
				<div class="col" ontouchstart="this.classList.toggle('hover');">
					<div class="container">
						<div class="front" style="background-image: url(5.jpg)">
							<div class="inner">
								<p>Diligord</p>
								<span>Lorem ipsum</span>
							</div>
						</div>
						<div class="back">
							<div class="inner">
							  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
							</div>
						</div>
					</div>
				</div>
				<!-- 一个col，一个方块 -->
				<div class="col" ontouchstart="this.classList.toggle('hover');">
					<div class="container">
						<div class="front" style="background-image: url(6.jpg)">
							<div class="inner">
								<p>Diligord</p>
								<span>Lorem ipsum</span>
							</div>
						</div>
						<div class="back">
							<div class="inner">
							  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
							</div>
						</div>
					</div>
				</div>

		 </div>
	</div>
	
</body>
</html>